import React from 'react';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { Card, Button } from 'antd';

const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps['items'] = [
  {
    key: '1',
    label: '待接单',
    children: [
      <p style={{ display: 'flex', alignItems: "center", justifyContent: 'space-between' }}>
        <span style={{ display: 'flex', alignItems: "center" }}>
          <img style={{ width: "30px" }} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
          15813467911
        </span>
        <span>
          2020-5-21 18:44:20
        </span>
      </p>,
      <hr />,
      <p >
        <Card variant="borderless" style={{ width: '100%' }}>
          <img style={{ width: "80px" }} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
          <div>
            <p>商品名称示例</p>
            <p>￥100.00<span>含餐盒费￥2.00</span></p>
          </div>
        </Card>
        <hr />
        <Card variant="borderless" style={{ width: '100%' }}>
          <img style={{ width: "80px" }} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
          <div>
            <p>商品名称示例</p>
            <p>￥100.00</p>
          </div>
        </Card>
      </p>,
      <hr />,
      <p>备注:不放葱和香菜,多放醋谢谢</p>,
      <hr />,
      <p style={{ display: 'flex', alignItems: "center", justifyContent: 'space-between' }}>总计:￥300.00元<Button type="primary">接单</Button></p>,
      <p style={{ display: 'flex', alignItems: "center", justifyContent: 'space-between' }}>
        <span style={{ display: 'flex', alignItems: "center" }}>
          <img style={{ width: "30px" }} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
          15813467911
        </span>
        <span>
          2020-5-21 18:44:20
        </span>
      </p>,
      <hr />,
      <p >
        <Card variant="borderless" style={{ width: '100%' }}>
          <img style={{ width: "80px" }} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
          <div>
            <p>商品名称示例</p>
            <p>￥100.00<span>含餐盒费￥2.00</span></p>
          </div>
        </Card>
      </p>,
      <hr />,
      <p style={{ display: 'flex', alignItems: "center", justifyContent: 'space-between' }}>总计:￥300.00元<Button type="primary">接单</Button></p>
    ],
  },
  {
    key: '2',
    label: '待发出',
    children: '待发出',
  },
  {
    key: '3',
    label: '待送达',
    children: '待送达',
  },
  {
    key: '4',
    label: '已完成',
    children: '已完成',
  },
  {
    key: '5',
    label: '取消/退款',
    children: '取消/退款',
  },
];

const App: React.FC = () => <Tabs defaultActiveKey="1" items={items} onChange={onChange} />;

export default App;